<template>
	<view>
		
			<view v-if="markDisplay" class="mark" style="z-index:1023;display:flex;">
				<view class="mark_content">
					<view class="preloader"></view>
					<view>正在努力为您加载</view>
				</view>
			</view>
		
		
		
			<view v-if="indicator==1" class="mark" :class="animationClass" style="display:flex;background:transparent;" :style="'z-index:'+(zindex?zindex:1022)">
				<view class="mark_content" style="background:rgba(0, 0, 0, 0.6);padding:16upx;border-radius:10upx;line-height:0;">
					<view class="preloader preloader-white"></view>
				</view>
			</view>
		
		
		
			<view v-if="indicator==2" class="mark" :class="animationClass" style="display:flex;background:transparent;" :style="'z-index:'+(zindex?zindex:1022)">
				<view class="mark_content">
					<view class="preloader"></view>
				</view>
			</view>
		
		
			<view v-if="indicator==3" class="mark" :class="animationClass" style="display:flex;background:#fafafa;" :style="'z-index:'+(zindex?zindex:1022)">
				<view class="mark_content">
					<view class="preloader"></view>
				</view>
			</view>
		
		
			<view v-if="indicator==4" class="mark" :class="animationClass" style="display:flex;background:#fafafa;" :style="'z-index:'+(zindex?zindex:1025)">
				<view class="mark_content">
					<view class="preloader"></view>
				</view>
			</view>
			
			
			<view v-if="indicator==5" class="mark" :class="animationClass" style="display:flex;background:transparent;" :style="'z-index:'+(zindex?zindex:1022)">
				<block v-if="message">
					<view class="mark_content" style="position:relative;padding:60upx 80upx 100upx;background:rgba(0, 0, 0, 0.6);border-radius:10upx;line-height:0;display:flex;justify-content:center;align-items:flex-end;">
						<view class="preloader preloader-white"></view>
						<view style="bottom:50upx;color:rgba(255,255,255,0.9);position:absolute;">{{message}}</view>
					</view>
				</block>
				<block v-else>
					<view class="mark_content" style="padding:80upx;background:rgba(0, 0, 0, 0.6);border-radius:10upx;line-height:0;display:flex;justify-content:center;align-items:flex-end;">
						<view class="preloader preloader-white"></view>
					</view>
				</block>
			</view>
	

		<view class="need_login" :style="[{'display':needLogin=='y'?'table':'none','z-index':zindex?zindex:1024}]">
			<text class="icon"></text>
			<text class="no_p_title">您尚未登录，是否立即登录？</text>
			<view class="mod_btns">
				<navigator url="../login/index" class="mod_btn" style="width:240upx">
					去登录
				</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			markDisplay: {
				type: Number,
				default: 0
			},
			needLogin: {
				type: String,
				default: 'n'
			},
			indicator:{
				type:Number,
				default:0
			},
			message: {
				type: String,
				default: ''
			},
			zindex:{
				type:Number,
				default:0
			},
			customBarH:{
				type:Number,
				default:0
			},
			animationClass:{
				type:String,
				default:''
			}
			
		},
		watch:{
			animationClass(val){
				if(val!=""){
					var that = this;
					that.animationClass = val;
					var f = function() {
						that.$emit('closeAnimation');
						clearInterval(t);
					};
					var t = setInterval(f, 400);
				}
				
			}
		}
	}
</script>
<style>
</style>
